<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" href="./index.css">
    <script src="./index.js"></script>
</head>

<body>
    <div class="header">
        <!-- <center> -->
        <div class="header_info">
            <div class="left_header">
                <img id="logo" src="../public/kugou_white.png" alt="">
                <div class="search">
                    <span class="iconfont icon-sousuo"></span>
                    <input type="text">
                </div>
            </div>
            <div class="right_header">
                <a href="#">我的音乐</a>
                <a href="#">歌单广场</a>
                <a href="#">音乐排行榜</a>
                <a href="#">歌手</a>
                <div class="login">登录</div>
            </div>
        </div>
        <!-- </center> -->
    </div>



    <div class="masage">
        <div class="swiper">
            <ul>
                <li>
                    <img src="../public/images/20200407002325623540.jpg" alt="">
                </li>
                <li class="binner_big">
                    <img src="../public/images/20200407002325623540.jpg" alt="">
                </li>
                <li>
                    <img src="../public/images/20200407002325623540.jpg" alt="">
                </li>
                <li>
                    <img src="../public/images/20200407002325623540.jpg" alt="">
                </li>
                <li>
                    <img src="../public/images/20200407002325623540.jpg" alt="">
                </li>
            </ul>  
            <span class="left"><span class="iconfont icon-xiangzuo1"></span></span>
            <span class="right"><span class="iconfont icon-xiangzuo11"></span></span>
        </div>

        <div class="hptop">
            <img src="../public/images/音乐场景.PNG" alt="">
        </div>

        <div class="song">
            <div class="song_top">
                <p>歌单</p>
                <a href="#" >歌单广场
                    <span class="iconfont icon-xiangzuo11"></span>
                </a>
            </div>
            
            <ul class="song_sort">
                <li>
                    <img src="../public/images/26-8.jpg" alt="">
                    <a href="#">热门歌手,热门歌手热门歌手热门歌手</a>
                </li>
                <li><img src="../public/images/26-8.jpg" alt=""><a href="#">热门歌手热门歌手,热门歌手热门歌手热门歌手</a></li>
                <li><img src="../public/images/26-8.jpg" alt=""><a href="#">热门歌手</a></li>
                <li><img src="../public/images/26-8.jpg" alt=""><a href="#">热门歌手</a></li>
                <li><img src="../public/images/26-8.jpg" alt=""><a href="#">热门歌手</a></li>
                <li><img src="../public/images/26-8.jpg" alt=""><a href="#">热门歌手</a></li>
                <li><img src="../public/images/26-8.jpg" alt=""><a href="#">热门歌手</a></li>
                <li><img src="../public/images/26-8.jpg" alt=""><a href="#">热门歌手</a></li>
                <li><img src="../public/images/26-8.jpg" alt=""><a href="#">热门歌手</a></li>
                <li><img src="../public/images/26-8.jpg" alt=""><a href="#">热门歌手</a></li>
            </ul>
        </div>

        <div class="singer">
            <div class="singger_header">
                <p>热门歌手</p>
                <a href="#">更多 
                    <span class="iconfont icon-xiangzuo11"></span>
                </a>
            </div>
            <div class="porson">
                <div class="poeson_demo">
                    <img  src="../public/images/歌手.jpg" alt="">
                    <p>林俊杰</p>
                </div>
                <div class="poeson_demo">
                    <img src="../public/images/歌手.jpg" alt="">
                    <p>林俊杰</p>
                </div>
                <div class="poeson_demo">
                    <img src="../public/images/歌手.jpg" alt="">
                    <p>林俊杰</p>
                </div>
                <div class="poeson_demo">
                    <img src="../public/images/歌手.jpg" alt="">
                    <p>林俊杰</p>
                </div>
                <div class="poeson_demo">
                    <img src="../public/images/歌手.jpg" alt="">
                    <p>林俊杰</p>
                </div>
            </div>
        </div>
        

        <div class="new_song">
            <div class="new_text">
                <p>华语新歌</p>
                <ul>
                    <li>华语</li>
                    <li>欧美</li>
                    <li>韩国</li>
                    <li>日本</li>
                </ul>
            </div>
            <div class="new_song_swiper">
                <ul>
                    <li>
                        <img src="../public/images/推荐歌曲.jpg" alt="">
                        <div class="song_info">
                            <p>77777</p>
                            <p>77777</p>
                        </div>
                        <img class="one" src="../public/播放键.png" alt="">
                        <img class="tow" src="../public/不知名图标.png" alt="">
                    </li>
                    <li>
                        <img src="../public/images/推荐歌曲.jpg" alt="">
                    </li>
                    <li>
                        <img src="../public/images/推荐歌曲.jpg" alt="">
                    </li>
                    <li>
                        <img src="../public/images/推荐歌曲.jpg" alt="">
                    </li>
                    <li>
                        <img src="../public/images/推荐歌曲.jpg" alt="">
                    </li>
                    <li>
                        <img src="../public/images/推荐歌曲.jpg" alt="">
                    </li>
                    <li>
                        <img src="../public/images/推荐歌曲.jpg" alt="">
                    </li>
                    <li>
                        <img src="../public/images/推荐歌曲.jpg" alt="">
                    </li>
                    <li>
                        <img src="../public/images/推荐歌曲.jpg" alt="">
                    </li>
                    <li>
                        <img src="../public/images/推荐歌曲.jpg" alt="">
                    </li>
                    <li>
                        <img src="../public/images/推荐歌曲.jpg" alt="">
                    </li>
                    <li>
                        <img src="../public/images/推荐歌曲.jpg" alt="">
                    </li>
                </ul>
            </div>
        </div>


        <div class="book_mv">
            <div class="book">
                <div class="text">
                    <p>有声小说</p>
                </div>
                <div class="info">
                    <div>
                        <img src="../public/images/歌手.jpg" alt="">
                        <p>山村风流小子</p>
                    </div>
                    <div>
                        <img src="../public/images/歌手.jpg" alt="">
                        <p>山村风流小子</p>
                    </div>
                    <div>
                        <img src="../public/images/歌手.jpg" alt="">
                        <p>山村风流小子</p>
                    </div>
                    <div>
                        <img src="../public/images/歌手.jpg" alt="">
                        <p>山村风流小子</p>
                    </div>
                    <div>
                        <img src="../public/images/歌手.jpg" alt="">
                        <p>山村风流小子</p>
                    </div>
                    <div>
                        <img src="../public/images/歌手.jpg" alt="">
                        <p>山村风流小子</p>
                    </div>
                    <div>
                        <img src="../public/images/小说.jpg" alt="">
                        <p>山村风流小子</p>
                    </div>
                    <div>
                        <img src="../public/images/小说.jpg" alt="">
                        <p>山村风流小子</p>
                    </div>
                    <div>
                        <img src="../public/images/小说.jpg" alt="">
                        <p>山村风流小子</p>
                    </div>
                    <div>
                        <img src="../public/images/小说.jpg" alt="">
                        <p>山村风流小子</p>
                    </div>
                </div>
                
            </div>
            <div class="mv">
                <div class="mv_header">
                    <p>排行榜</p>
                    <a href="#">更多
                        <span class="iconfont icon-xiangzuo11"></span>
                    </a>
                </div>
                <div class="mv_info">
                    <div>
                        <img src="../public/images/排行榜.jpg" alt="">
                    </div>
                    <div>
                        <img src="../public/images/排行榜.jpg" alt="">
                    </div>
                    <div>
                        <img src="../public/images/排行榜.jpg" alt="">
                    </div>
                    <div>
                        <img src="../public/images/排行榜.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>

        
    </div>


    <div class="flooter">
        <ul>
            <li>
                <p>腾讯音乐娱乐集团</p>
            </li>
            <li>
                <p>腾讯音乐人</p>
            </li>
            <li>
                <p>酷狗音乐人</p>
            </li>
            <li>
                <p>星曜推歌</p>
            </li>
            <li>
                <p>5sing原创计划</p>
            </li>
            <li>
                <p>曲库开放计划</p>
            </li>
            <li>
                <p>听歌识曲</p>
            </li>
            <li>
                <p>歌叽歌叽</p>
            </li>
        </ul>
        <p class="text">此网页仅用于学习研究@gdxzzyxy 2020-2023 20JJ01B08 user_h</p>
    </div>
</body>

</html>